<template>
	<!--我的团队  -->
	<view class="mt">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的团队</block>
		</cu-custom>			
		<view class="top">
			<view class="solid-bottom"><search :type="true" @search="Search" :placeholder="'请输入姓名'"></search></view>
			<view class="tabs" >
				<view>
					<view v-for="(tab, ind) in tabs" @click="change(ind, tab.type)" :key="ind" :class="{ act: ind === currentIndex }">{{ tab.name }}</view>
				</view>
			</view>				
		</view>
		<view class="mt-list">
			<scroll-view class="srx" scroll-y v-if="list.length" @scrolltolower="loadData(currentIndex, type, tapid, true)">
				<navigator hover-class="none" class="item" :url="'../pages/spree/Team_detail?id='+item.id" v-for="(item, index) in list " :key="index">
					<view class="vie">
						<view class="background-img flex align-center">
							<image :src="item.weixin_headimgurl" mode="" class="head-portrait"></image>
							<view class="flex-sub">
								<view class="name">{{item.user_name}}</view>	
								<view class="time">{{item.sq_time}}</view>
								<view class="cu-capsule radius flex">
									<view class="cu-tag bg-grey sm">推荐人</view>
									<view class="cu-tag line-grey sm"> {{ item.parent_name || '没有' }}</view>
								</view>
								<view class="mt-grade margin-top-xs" v-if="item.exp_name">
									{{item.exp_name}}
								</view>	
							</view>
						</view>
					</view>
				</navigator>					
			</scroll-view>
			<empty-data v-else>什么也没有发现~</empty-data>
		</view>
	</view>
</template>
<script>
	import { myTeam, Partner } from '@/common/api/lbt'
	import Search from '@/components/search'
	export default{
		name:'myTeam',
		
		components:{
			Search,
		},
		data(){
			return {
				currentIndex: 0,
				title: 'action-sheet',
				type: 1,
				tapid: 0,
				list: [],
				tabs:[
					{name:'一级团队', type:1},
					{name:'二级团队', type:2}],
				params:{
					page: 1,
					commisions: 0,
					choose_val: 0,
					type: 1,
					search_text: ''
				},
				tapind: 0,
				params2:{
					user_type: 3,
					page: 1,
					type: '',
					kind: ''
				},
				itemList: []
			}
		},
		onLoad() {
			var arr = []
			for (let i in this.itemist) {
				arr.push(obj[i]); //属性
				//arr.push(obj[i]); //值
			}
			this.getInfo()
		},	
		methods: {
			getInfo(load) {
				uni.showLoading({ mask: true })
				myTeam(this.params).then(res => {
					uni.hideLoading()
					let list = res.data.map(item => {
						if (!item.weixin_headimgurl) item.weixin_headimgurl = '/static/profile.png'
						return item
					})
					this.list = [...this.list, ...list]
					if (!list.length) {
						uni.showToast({
							icon: 'none',
							title: '没有更多数据了~'
						})
					}					
					if (!load) {
						this.itemList = [
							`一级团队(${res.one.rcount})`,
							`合伙人(${res.one.count_t})`,
							`粉丝(${res.one.count_f})`
						]
						this.itemList2 = [
							`二级团队(${res.two.rcount})`,
							`合伙人(${res.two.count_t})`,
							`粉丝(${res.two.count_f})`
						]						
					}
				})
			},						
			getcountT() {
				uni.showLoading({ mask: true })
				Partner(this.params2).then(res => {
					uni.hideLoading()
					let list = res.data.map(item => {
						if (!item.weixin_headimgurl) item.weixin_headimgurl = '/static/avatar.png'
						return item
					})
					this.list = [...this.list, ...list]
					if (!list.length) {
						uni.showToast({
							icon: 'none',
							title: '没有更多数据了~'
						})
					}					
				})
			},
			Search (key) {
				this.params.search_text = key
				this.list = []
				this.getInfo()
				
			},
			loadData (ind, type, tapId, load = false) {
				this.tapind = tapId
				this.currentIndex  = ind
				this.type = type
				this.tapid = tapId
				if (!load) this.list = []
				switch (tapId) {
					case 0:
					load ? this.params.page++ : this.params.page = 1
					this.params.type = type
					this.getInfo(load)
					break;
					case 1:
					load ? this.params2.page++ : this.params2.page = 1
					this.params2.type = type
					this.params2.kind = tapId
					this.getcountT()
					break;
					case 2:
					load ? this.params2.page++ : this.params2.page = 1
					this.params2.type = type
					this.params2.kind = tapId
					this.getcountT()
				}
			},
			change(ind, type) {
				if(ind === 0){
					uni.showActionSheet({
						itemList:this.itemList,
						success: (e) => {
							this.loadData(ind, type, e.tapIndex)
						}
					})
				}if(ind == 1){
					uni.showActionSheet({
						itemList: this.itemList2,
						success: (e) => {
							this.loadData(ind, type, e.tapIndex)
						}
					})
				}
			}
		},
	}
</script>

<style lang="less">
	@import '../common/styles/variables.less';
	.fixedBody;
	.mt {
		background-color: #efefef;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-flow: column;
		
		& > .inp{
			padding: 20upx;
			background: #c490c0;
		}
	 .tabs {
		 height: @height;
		 & > view {
			 height: @height;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 background-color:white;
			 .border-bottom;  
			 width: 100%;
			 & > view {
				 flex: 1;
				 height: 100%;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 position: relative;
				 &::after {
					 content:'';
					 position:absolute;
					 left: 0;
					 bottom: 0;
					 width: 100%;
					 border-top:4upx solid @red;
					 transform: scaleX(0);
					 transition: transform .2s;
					 will-change: transform;
				 }		 
				 &.act {
					 color:@red;
					 &::after {
						 transform: scaleX(.6);
					 }
				 }
			 }	 
		 }
	 }
		.mt-list {
			flex:1;
			overflow: hidden;
			position: relative;
			.srx {
				height: 100%;
				.item {
					&:not(:last-of-type) {
					   .border-bottom(15upx)						
					}					
				}
				.vie {
					padding: 15upx;
					background-color: white;
					.arrowRight(#666,0,15upx);
					.background-img{
						background-size: 30upx;
						display: flex;
						& > .head-portrait{
							width: 120upx;
							height: 120upx;
							border-radius: 50%;
							background-color:@headBg;
						}
						& > view{
							margin-left: 15upx;
							.name {
								font-size:@medium;
							}
							.time {
								font-size:@minSize;
								color:@gray;
								padding: 6upx 0;
							}
							.mt-grade{
								display: inline-block;
								padding: 5upx 10upx; 
								color: white;
								font-size: @minSize;
								border-radius: 5upx;
								background-color: #53AF4F;
							}
						}
					}
				}
			}
		}
	}
</style>
